<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		.conten{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background-color: #000;
			opacity: 0.8;
			display: none;
			animation: ball 1s;
			-webkit-animation: ball 1s;
		}

		
		@-webkit-keyframes ball {
		  0% {
		    -webkit-transform: scale(0.2);
		            transform: scale(0.2);
		    }

		  100% {
		  	 -webkit-transform: scale(1);
		            transform: scale(1);
		    }
		}
		@-webkit-keyframes square-spin {
		  25% {
		    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
		            transform: perspective(100px) rotateX(180deg) rotateY(0); }

		  50% {
		    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
		            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }

		  75% {
		    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
		            transform: perspective(100px) rotateX(0) rotateY(180deg); }

		  100% {
		    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
		            transform: perspective(100px) rotateX(0) rotateY(0); } }

		@keyframes square-spin {
		  25% {
		    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
		            transform: perspective(100px) rotateX(180deg) rotateY(0); }

		  50% {
		    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
		            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }

		  75% {
		    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
		            transform: perspective(100px) rotateX(0) rotateY(180deg); }

		  100% {
		    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
		            transform: perspective(100px) rotateX(0) rotateY(0); } }

		.square-spin > div {
		  -webkit-animation-fill-mode: both;
		          animation-fill-mode: both;
		  width: 50px;
		  height: 50px;
		  background: #fff;
		  border: 1px solid red;
		  -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
		          animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; /*infinite循环播放*/
	      position: absolute;
		   top: 50%;
		   left: 50%;
		   margin-top: -27px;
		   margin-left: -27px;      
		}

		#load{
		  color: #fff;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  margin-top: 33px;
		  margin-left: -27px;
		}
	</style>

</head>
<body>
	<div class="conten">
		<div id="load">loading</div>
		<div class="loader-inner square-spin">
          <div></div>
        </div>
	</div>
	
	<button type="button" id="showLoading">显示</button>

	<script src="../lib/jquery.min.js"></script>
	<script>
		!function(window,document,$,undefined) {

			var init = function() {

				var ct = $('.conten'),
					sL = $('#showLoading');

				sL.on('click',function() {
					ct.show();
				})

				$(window).on('keyup',function(e) {
					e = event || window.event;
					if(e.keyCode == 27) {
						ct.hide();
					}
				})

			}

			$(document).ready(init)
		}(window,document,jQuery)
	</script>
</body>
</html>